<?php

namespace Modules\Test\Admin;

use Duxravel\Core\Events\ManageForm;
use Duxravel\Core\UI\Form;
use Duxravel\Core\UI\Table;

class Index extends \Modules\System\Admin\Expend
{

    public string $model = \Duxravel\Core\Model\Base::class;

    public function index($id = 0){
//        <link rel="stylesheet" href="https://listen80.github.io/code-view/src/code.css" />
//<script type="text/javascript" src="https://listen80.github.io/code-view/src/code.js"></script>
        $form = $this->form($id);
        $form->title('测试管理', false);
        if ($id && $form->modelElo()) {
            $form->setKey($form->modelElo()->getKeyName(), $id);
        }
        $form->action(route('admin.test.index.save'));
        event(new ManageForm(get_called_class(), $form));
        return $form->render();
    }

    protected function table(): Table
    {
        $table = new Table(new $this->model());
        // Generate Table Make
        return $table;
    }

    public function form(int $id = 0): Form
    {
        $form = new Form(new $this->model());
        $form->script('const test = "测试变量"', 'test');
//        $form->script(,'{}');
//        $form->
        $form->image('图片上传测试','image111');
        $form->html('',function (){
            return <<<HTML
<!--<template>-->
<!--  <a-card>-->
<!--    {{ value }}-->
<!--  </a-card>-->
<!--</template>-->
<script>
  export default {
    name:'app-test',
    props: {
      value: {
        type: String,default:123
      },
    },
    data(){
      return {

      }
    },
    template:`
    <a-card>
        {{ value }}
    </a-card>
    `
  }
</script>
HTML;
        });
        $form->html('测试组件',function (){
           return [
                'nodeName'=>'app-test',
                'value'=>'测试1234'
           ];
        });
        $tab = $form->tab();

        $tab->column('基础',function (Form $form){
            $row = $form->row();
            $row->column(function (Form $form) {
                $form->text('普通输入框', 'text1')->must()->attr('allow-clear',true)->verify('required|min:4', [
                    'required' => '必须填写该内容',
                    'min'      => '最小字符不能少于4个',
                ])->prompt('组件帮助描述信息');
//                $form->html('标题', function() {
//                    return [
//                        'nodeName' => 'a-alert',
//                        'child' => [
//                            'nodeName'=>'pre',
//                            'class'=>'language-php dump',
//                            'child'=>[
//                                'nodeName'=>'code',
//                                'child'=><<<TEXT
//    \$form->text('普通输入框', 'text1')->must()
//        ->attr('allow-clear',true)->verify('required|min:4', [
//            'required' => '必须填写该内容',
//            'min'      => '最小字符不能少于4个',
//        ])->prompt('组件帮助描述信息');
//TEXT
//                            ]
//                        ]
//                    ];
//                });
                $form->text('普通输入框-前后文', 'text2')->beforeText('每天')->afterText('个')->default('默认值');
                $form->text('普通输入框-前后图', 'text4')->beforeIcon("user")->afterIcon("settings");
                $form->password('密码输入框', 'password');
                $form->email('邮箱','email');
                $form->tags('标签','tags')->help("回车确认",true);
                $form->url('Url地址','url');
                $form->ip('Ip地址','ip');
                $form->tel('电话','phone');
                $form->text('测试','test');
            });

            $row->column(function (Form $form) {
                $form->color('颜色选择','color');
                $form->select('下拉单选', 'type3', ['微信小程序','微信公众号']);
                $form->select('下拉多选', 'type4', ['微信小程序','微信公众号'])->multi();
                $form->textarea('多行文本','textarea');
                $trees = [
                    ['id'=>1,'pid'=>0,'name'=>'教学楼','children'=>[
                        ['id'=>8,'pid'=>1,'name'=>'教学A区'],
                        ['id'=>9,'pid'=>1,'name'=>'教学B区'],
                    ]],
                    ['id'=>2,'pid'=>0,'name'=>'宿舍楼','children'=>[
                        ['id'=>10,'pid'=>2,'name'=>'宿舍A区'],
                        ['id'=>11,'pid'=>2,'name'=>'宿舍B区'],
                    ]],
                    ['id'=>3,'pid'=>0,'name'=>'食堂楼','children'=>[
                        ['id'=>12,'pid'=>3,'name'=>'食堂A区'],
                        ['id'=>13,'pid'=>3,'name'=>'食堂B区']
                    ]],
                    ['id'=>4,'pid'=>0,'name'=>'办公楼'],
                    ['id'=>6,'pid'=>0,'name'=>'运动馆'],
                    ['id'=>7,'pid'=>0,'name'=>'超市'],
                ];
                $form->tree('树形选择器','tree',$trees);
//                $form->cascader('多级选择', 'class_id', function ($value) {
//                    return (new $this->model)->get(['class_id as id', 'parent_id as pid', 'name']);
//                });
                $form->choice('关联选择','tid')->ajax(route('admin.wechat.setting'), 'id', function ($column) {
                    // 选择器展示列
                    $column->text('ID', 'id');
                    $column->text('配置名称', 'name');
                    return $column;
                });
            });
            $row->column(function ($form) {
                $options = [
                    ['id' => 1,'name' => '选项一','pid' => 0],
                    ['id' => 2,'name' => '选项二','pid' => 0],
                    ['id' => 3,'name' => '选项三','pid' => 0],
                    ['id' => 4,'name' => '子选项一','pid' => 1],
                    ['id' => 5,'name' => '子选项二','pid' => 1],
                    ['id' => 6,'name' => '子选项三','pid' => 2],
                    ['id' => 7,'name' => '子选项四','pid' => 2],
                ];
                $form->cascader('多级选择-单选', 'class_id1', $options);
                $form->cascader('多级选择-多选', 'class_id2', $options)->multi();
                $form->number('数字', 'number')->help("提示信息提示信息提示信息");
                $row = $form->row();
                $row->column(function ($form){
                    $form->radio('单选', 'type1', ['微信小程序','微信公众号']);
                    $form->checkbox('多选', 'type2', ['微信小程序','微信公众号']);
                });
                $row->column(function ($form){
                    $form->toggle('切换组件', 'status')->attr('size','small');
                    $form->toggle('切换组件-方块', 'status1')->attr('type','round');
                    $form->toggle('切换组件-线', 'status3')->attr('type','line');
                    $form->toggle('切换组件-文字', 'status4')->attr('child',[
                        ['vSlot:checked'=>'','nodeName'=>'span','child'=>'ON'],
                        ['vSlot:unchecked'=>'','nodeName'=>'span','child'=>'OFF']
                    ]);
                });


            });

        });
        $tab->column('日期',function (Form $form){
            $row = $form->row();
            $row->column(function ($form) {
                $form->date('日期选择器-年', 'date')->type('year');
                $form->date('日期选择器-月', 'month')->type('month');
                $form->date('日期选择器-日', 'day');
            });
            $row->column(function ($form) {
                $form->datetime('日期时间选择器-时','datetime_hour')->string('YYYY-MM-DD HH');
                $form->datetime('日期时间选择器-分','datetime_minute')->string('YYYY-MM-DD HH:mm');
                $form->datetime('日期时间选择器-秒','datetime_second')->string('YYYY-MM-DD HH:mm:ss');
            });
            $row->column(function ($form) {
                $form->time('时间选择器-时','time_hour')->string('HH');
                $form->time('时间选择器-分','time_minute')->string('HH:mm');
                $form->time('时间选择器-秒','time_second')->string('HH:mm:ss');
                $form->daterange('日期范围选择器','start')->stopField('end');
            });
        });
        $tab->column('上传',function (Form $form){
            $row = $form->row();
            $row->column(function ($form) {
                $form->image('图片上传','image');
            });
            $row->column(function ($form) {
                $form->images('多图上传','images');
            });
            $row->column(function ($form) {
                $form->file('文件上传','file');
            });
        });
        $tab->column('富文本',function (Form $form){
            $form->editor('富文本编辑器','editor')->attr('contextmenu',false);
        });

        return $form;
    }

    public function doc(){
        return $this->systemView();
    }




}
